【前言】
本系列為個人前端學習之路的學習筆記，在過往的學習過程中累積了很多筆記，如今想藉著IT邦幫忙這個平台做整理+再複習。
本系列標題一律以【】標示該篇文章主要涉及的內容，例如【JavaScript】、【Vue】等等。
若內容有誤，還麻煩各路大神不吝於點出問題，感激不敬。

在JavaScript中有許多操作陣列的方法，本篇將針對map()
使用map()會產生一個新陣列，陣列.map(callback function)會將陣列中的資料一筆一筆作為參數帶入callback function中，經過我們一陣操作之後再將新的結果放到新陣列中
與filter()不同的是，map()每次將陣列中的資料帶入callback function時，一定會return一個東西到新陣列，因此新陣列的長度永遠與原始陣列相同

以陣列方法之filter()中的案例為例
如果改用map()的話會變成這樣：

const array = [1, 2, 3, 4, 5];
const newArray = array.map(function(item, index, array){
  return item > 3;
});
console.log(newArray); //(5) [false, false, false, true, true]

當使用filter()時，如果判斷式的結果為false就不會回傳，因此在陣列方法之filter()中newArray的長度會變得比array還少
但map()無論如何一定會return，因此newArray長度與array完全相同

如果filter()是篩選，那map()可以說是巡房，逐個訪問陣列中的每筆資料，之後再妥善的放到新陣列裡面

簡單的範例

使用map寫一個「資料有沒有大於3」的陣列

const array = [1, 2, 3, 4, 5];
const newArray = array.map((item) => {
    return `${item}${item>3 ? "大於3" : "沒有大於3"}`
});
console.log(newArray); //(5) ['1沒有大於3', '2沒有大於3', '3沒有大於3', '4大於3', '5大於3']

箭頭函式的問題

使用map()時，如果希望return的值是物件的話，要特別注意箭頭函式的使用

const array = [1, 2, 3, 4, 5];
const newArray = array.map((item) => {num: item});
console.log(newArray); //(5) [undefined, undefined, undefined, undefined, undefined]

可以看到並沒有正確地回傳我們所要的結果
這是因為物件的{ }會被視為箭頭函式的片段（無法正確return，導致回傳空值）
也就是說我們的程式碼被以為是這樣

const newArray = array.map((item) => {
  num: item  //沒有該有的return，物件也沒有{}
});

解決方案就是多使用一個( )包起來

const newArray = array.map((item) => ({num: item}));

這樣就可以正常運作了